{% extends "templates/base.phtml" %}
{%block content%}
<div class="page-content-wrap">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>优惠券图片</th>
                                <th>有效期</th>
                                <th>数量</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody class="J-tbody">
                            {%for card in card %}
                            <tr class="active">
                                <td>{{card.name}}</td>
                                <td><img src="{{card.pic}}"/></td>
                                <td><p>{{card.start}}~{{card.end}}</p></td>
                                <td><p>{{card.count}}</p></td>
                                <td>
                                    <button class="btn btn-danger J-delete"  onclick="deleteConfirm({{card.id}});">删除</button>
                                </td>
                            </tr>
                            {%endfor%}
                            </tbody>
                        </table>
                    </div>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                        添加优惠券
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <form class="form-horizontal" method="post">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">优惠券名称：</label>
                                <div class="col-sm-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                        <input name="name" type="text" class="form-control">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">优惠券图片：</label>
                                <div class="col-sm-9 tocket-img">
                                    <input class="J-fileup" id="fileup" name="fileup"
                                           type="file" multiple="true">
                                    <input id="pic" name="pic" class="form-control"
                                           type="hidden" value="">
                                    <img id="thumb" src="" style="max-height: 200px;max-width: 200px">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">有效期:</label>
                                <div class="col-sm-9">
                                    <div class="col-sm-6">
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
                                            <input name="start" type="text" class="form-control datepicker" placeholder="起始">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
                                            <input name="end" type="text" class="form-control datepicker" placeholder="截止">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">优惠券数量：</label>
                                <div class="col-sm-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                        <input name="count" type="text" class="form-control">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group col-sm-12">
                                <div class="col-sm-6 col-sm-offset-5">
                                    <button class="btn btn-primary J-submit">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>






{%endblock%}
{%block end%}
<style type="text/css">
    table *{
        text-align: center;
    }
    table img{
        width: 150px;
        height: auto;
    }
    .tocket-img{
        overflow: hidden;
    }
    .tocket-img img{
        overflow: hidden;
    }
    .datepicker{
        z-index: 10000 !important;
        width:240px;
    }

</style>
<script src="/assets/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/assets/uploadify/uploadify.css">
<script type="text/javascript">


    $(function () {
        $(".J-fileup").each(function () {
            $(this).uploadify({
                'formData': {},
                'swf': '/assets/uploadify/uploadify.swf',
                'uploader': '/admin/resource/upload',
                'cancelImg': '/assets/uploadify/uploadify-cancel.png',//单个取消上传的图片
                'onUploadSuccess': function (file, data, response) {
                    var data = JSON.parse(data);
                    if (data.status == 1) {
                        $('#pic').val(data.data);
                        $('#thumb').attr("src", data.data);
                        $('#thumb').css("display", "block");
                    }

                }
            });
        });
    });


</script>
<script type="text/javascript">
    function deleteConfirm(delete_id) {
        noty({
            text: '确定要删除此优惠券么?',
            layout: 'topRight',
            buttons: [
                {
                    addClass: 'btn btn-success btn-clean', text: '确定', onClick: function ($noty) {
                    $noty.close();
                    $.post('/admin/appcoupon/delcard/' + delete_id, {}, function (result) {
                        noty({text: '删除成功', layout: 'topRight', type: 'success'}
                        );
                        location.reload();
                    });
                }
                },
                {
                    addClass: 'btn btn-danger btn-clean', text: '取消', onClick: function ($noty) {
                    $noty.close();
                }
                }
            ]
        })
    }
</script>
{%endblock%}